<!-- 编辑商品抽屉 -->
<template>
    <el-drawer :visible="visible" :before-close="handleClose" :direction="direction" size="65%">
        <div slot="title" class="clearfix header-bar">
            {{ title }}
        </div>
        <div class="all">
            <el-form :model="form" label-width="80px" ref="form">
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="form.productName" size="medium"></el-input>
                </el-form-item>

                <el-form-item label="主图">
                    <el-upload class="avatar-uploader" action="/files/batchUpload" multiple list-type="picture-card"
                        :auto-upload="false" :file-list="fileList" :on-change="handleUploadChange">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


                <el-form-item label="商品分类" prop="categoryId">
                    <el-cascader v-model="form.categoryId" size="medium" :options="cascader"
                        :props="{ checkStrictly: true }" @change="CasChange" placeholder="请选择分类"
                        clearable></el-cascader>
                </el-form-item>
                <el-form-item label="价格" prop="defaultPrice">
                    <el-input-number v-model="form.defaultPrice" size="medium" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.sort" size="medium" :min="0"></el-input-number>
                </el-form-item>

                <el-form-item label="详情" prop="detail">
                    <el-input type="textarea" rows="4" v-model="form.detail"></el-input>
                </el-form-item>

                <el-form-item label="颜色">
                    <el-table :data="form.colors" size="small" :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ textAlign: 'center', background: '#F5F6FA', color: '#000' }"
                        style=" margin-top: 10px;border: 1px solid #ECEEF4;">
                        <el-table-column label="颜色名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.colorName" size="medium" placeholder="输入颜色名称"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="图片" width="180">
                            <template slot-scope="scope">
                                <el-upload class="color-image-uploader" action="#" :show-file-list="false"
                                    :auto-upload="false"
                                    :on-change="(file) => handleColorImageChange(file, scope.$index)"
                                    :before-upload="beforeColorImageUpload">
                                    <img v-if="getColorImagePreview(scope.$index)"
                                        :src="getColorImagePreview(scope.$index)" class="color-avatar">
                                    <i v-else class="el-icon-plus color-uploader-icon"></i>
                                </el-upload>
                            </template>
                        </el-table-column>
                        <el-table-column label="排序" width="220">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.sort" :min="0" size="medium"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="removeColor(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                        <template slot="append">
                            <div style="text-align: left; padding: 10px;">
                                <el-button type="primary" size="medium" v-click-blur plain
                                    @click="addColor">新增颜色</el-button>
                            </div>
                        </template>
                    </el-table>
                </el-form-item>

                <el-form-item label="尺码">
                    <el-table :data="form.sizes" :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ textAlign: 'center', background: '#F5F6FA', color: '#000' }" size="small"
                        style=" margin-top: 10px;border: 1px solid #ECEEF4;">
                        <el-table-column label="尺码名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.sizeName" size="medium" placeholder="输入尺码名称"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="排序" width="220">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.sort" :min="0" size="medium"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="removeSize(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                        <template slot="append">
                            <div style="text-align: left; padding: 10px;">
                                <el-button type="primary" size="medium" v-click-blur plain
                                    @click="addSize">新增尺码</el-button>
                            </div>
                        </template>
                    </el-table>
                </el-form-item>

                <el-form-item label="SKU">
                    <!-- <el-button type="primary" size="mini" @click="addSku">新增 SKU</el-button> -->
                    <!-- <el-button type="success" size="medium" v-click-blur plain style="margin-left: 8px;"
                        @click="generateSkus">自动生成</el-button> -->
                    <el-table :data="form.skus" :cell-style="{ textAlign: 'center', color: '#000' }"
                        :header-cell-style="{ textAlign: 'center', background: '#F5F6FA', color: '#000' }" size="small"
                        style="margin-top: 10px;border: 1px solid #ECEEF4;">
                        <el-table-column label="颜色" width="120">
                            <template slot-scope="scope">
                                <p>{{ form.colors[scope.row.specColor].colorName }}</p>
                                <!-- <el-input v-model="scope.row.specColor" size="mini" placeholder="例如 0"></el-input> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="尺码" width="120">
                            <template slot-scope="scope">
                                <p>{{ form.sizes[scope.row.specSize].sizeName }}</p>
                                <!-- <el-input v-model="scope.row.specSize" size="mini" placeholder="例如 0"></el-input> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="价格" width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.price" :min="0" size="medium">
                                    <template slot="append">¥</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.stock" :min="0" size="medium"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="SKU 编码">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.skuCode" size="medium"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="removeSku(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

                
                <el-form-item label="详情图">
                    <!-- 上传按钮，只负责选择文件，不显示默认列表 -->
                    <el-upload class="detail-upload-btn" action="/files/batchUpload" multiple :show-file-list="false"
                        :auto-upload="false" :on-change="handleSubUploadChange">
                        <el-button type="primary" size="medium" v-click-blur plain>上传图片</el-button>
                        <div slot="tip" class="el-upload__tip">建议图片宽750px，您可以通过拖拽进行排序</div>
                    </el-upload>

                    <!-- 下方一行两列：左侧缩略图，可拖拽排序；右侧详情预览 -->
                    <el-row class="detail-wrapper" :gutter="5">
                        <el-col :span="12" class="detail-thumbs">
                            <div v-for="(item, index) in subFileList" :key="item.uid || item._path || index"
                                class="detail-thumb-item" draggable="true" @dragstart="onSubThumbDragStart(index)"
                                @dragover.prevent @drop="onSubThumbDrop(index)">


                                <el-image :src="item.url" fit="cover" class="detail-thumb-image" />
                                <!-- <span class="detail-thumb-index">{{ index + 1 }}</span> -->
                                <i class="el-icon-close detail-remove" @click.stop="removeSubImage(index)"></i>
                            </div>
                        </el-col>
                        <el-col :span="12" class="detail-preview">
                            <div class="detail-preview-body">
                                <el-image v-for="(item, index) in subFileList" :key="item.uid || item._path || index"
                                    :src="item.url" fit="contain" class="detail-preview-image" />
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <div class="drawer-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { mapState } from 'vuex'
import { batchUploadFiles, batchRemoveFiles, uploadFile } from '@/apis/files'
import { addProduct, updateProduct } from '@/apis/product'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        product: {
            type: Object,
            default: null
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            form: {
                productId: null,
                productName: '',
                categoryId: null,
                defaultPrice: 0,
                mainImage: '',
                subImages: '',
                detail: '',
                colors: [],
                sizes: [],
                skus: [],
                sort: 0
            },
            direction: 'rtl',
            fileList: [],
            selectedFiles: [],
            subFileList: [],
            subSelectedFiles: [],
            originalMainPaths: [],
            originalSubPaths: [],
            subDragIndex: null,
            colorImageFiles: [] // 存储每个颜色的文件对象 { colorIndex, file, previewUrl }
        };
    },

    computed: {
        ...mapState('category', ['cascader']),
    },
    //监控data中的数据变化
    watch: {
        // 编辑时回显商品数据
        product: {
            immediate: true,
            handler(val) {
                // 每次切换商品时，先统一清理本地图片状态，避免上一次新增/编辑残留
                this.fileList = []
                this.selectedFiles = []
                this.subFileList = []
                this.subSelectedFiles = []
                this.originalMainPaths = []
                this.originalSubPaths = []
                this.colorImageFiles = []

                if (!val) {
                    // 重置为默认值
                    this.form = {
                        productId: null,
                        productName: '',
                        categoryId: null,
                        defaultPrice: 0,
                        mainImage: '',
                        subImages: '',
                        detail: '',
                        colors: [],
                        sizes: [],
                        skus: [],
                        sort: 0
                    }
                    return
                }

                this.form = {
                    productId: val.productId || null,
                    productName: val.productName || '',
                    categoryId: val.categoryId || null,
                    defaultPrice: val.defaultPrice || 0,
                    mainImage: val.mainImage || '',
                    subImages: val.subImages || '',
                    detail: val.detail || '',
                    colors: val.colors || [],
                    sizes: val.sizes || [],
                    skus: val.skus || [],
                    sort: val.sort || 0
                }

                // 将后端返回的颜色/尺码 ID 转换为当前数组中的索引，并同步更新 SKU 中的 specColor/specSize
                const colorIdToIndex = {}
                const sizeIdToIndex = {}

                if (Array.isArray(this.form.colors)) {
                    this.form.colors.forEach((c, index) => {
                        if (c && c.colorId != null) {
                            colorIdToIndex[c.colorId] = index
                        }
                    })
                }

                if (Array.isArray(this.form.sizes)) {
                    this.form.sizes.forEach((s, index) => {
                        if (s && s.sizeId != null) {
                            sizeIdToIndex[s.sizeId] = index
                        }
                    })
                }

                if (Array.isArray(this.form.skus)) {
                    this.form.skus = this.form.skus.map(sku => {
                        const newSku = { ...sku }
                        if (sku.specColor != null && Object.prototype.hasOwnProperty.call(colorIdToIndex, sku.specColor)) {
                            newSku.specColor = String(colorIdToIndex[sku.specColor])
                        }
                        if (sku.specSize != null && Object.prototype.hasOwnProperty.call(sizeIdToIndex, sku.specSize)) {
                            newSku.specSize = String(sizeIdToIndex[sku.specSize])
                        }
                        return newSku
                    })
                }

                // 编辑模式下，根据已有主图/副图路径构造 file-list 以便全部预览
                const mainPaths = (this.form.mainImage || '').split(',').filter(p => p)
                this.originalMainPaths = mainPaths.slice()
                this.fileList = mainPaths.map((p, index) => ({
                    name: `main-${index}`,
                    url: this.$getImgUrl ? this.$getImgUrl(p) : p,
                    _path: p,
                    status: 'finished'
                }))
                this.selectedFiles = []

                const subPaths = (this.form.subImages || '').split(',').filter(p => p)
                this.originalSubPaths = subPaths.slice()
                this.subFileList = subPaths.map((p, index) => ({
                    name: `sub-${index}`,
                    url: this.$getImgUrl ? this.$getImgUrl(p) : p,
                    _path: p,
                    status: 'finished'
                }))
                this.subSelectedFiles = []
            }
        }
    },

    //方法集合
    methods: {
        //级联选择器change事件
        CasChange() {
            if (Array.isArray(this.form.categoryId) && this.form.categoryId.length > 0) {
                this.form.categoryId = this.form.categoryId[this.form.categoryId.length - 1]
            }
            console.log(this.form.categoryId)
        },
        // 重置表单和本地状态
        resetForm() {
            this.form = {
                productId: null,
                productName: '',
                categoryId: null,
                defaultPrice: 0,
                mainImage: '',
                subImages: '',
                detail: '',
                colors: [],
                sizes: [],
                skus: [],
                sort: 0
            }
            this.fileList = []
            this.selectedFiles = []
            this.subFileList = []
            this.subSelectedFiles = []
            this.originalMainPaths = []
            this.originalSubPaths = []
            this.colorImageFiles = []
        },

        handleClose() {
            this.$confirm('确认关闭？')
                .then(() => {
                    this.resetForm()
                    this.$emit('update:visible', false)
                })
                .catch(() => {
                    // 用户点了取消或关闭确认框，不做任何处理，避免控制台报错
                })
        },

        // 主图上传变更：只保存文件并为每张图片生成预览（最多 8 张）
        handleUploadChange(file, fileList) {
            // Element UI 的 fileList 是本次变更后的完整列表，这里直接按长度限制
            if (fileList && fileList.length > 8) {
                this.$message.warning('主图最多只能上传 8 张')
                // 截取前 8 个保留
                fileList = fileList.slice(0, 8)
            }

            this.fileList = fileList
            if (!fileList || fileList.length === 0) {
                this.selectedFiles = []
                return
            }

            const files = fileList.map(f => f.raw).filter(Boolean)
            this.selectedFiles = files

            // 为每个文件生成本地预览 URL
            this.fileList.forEach(f => {
                if (!f.url && f.raw) {
                    f.url = URL.createObjectURL(f.raw)
                }
            })
        },

        // 副图上传变更：在现有副图基础上追加新文件，并为每张图片生成预览
        handleSubUploadChange(file, fileList) {
            // Element UI 会传入当前 upload 管理的完整 fileList，这里只取其中“新选择的 raw 文件”来追加
            const existingRaws = new Set(this.subFileList.map(f => f.raw).filter(Boolean))

            const newFileItems = fileList.filter(f => f.raw && !existingRaws.has(f.raw))
            if (newFileItems.length === 0 && this.subFileList.length === 0) {
                // 没有任何图片
                this.form.subImages = ''
                this.subSelectedFiles = []
                return
            }

            // 为新文件生成本地预览 URL
            newFileItems.forEach(f => {
                if (!f.url && f.raw) {
                    f.url = URL.createObjectURL(f.raw)
                }
            })

            // 在原有 subFileList 基础上追加新文件，旧图（带 _path）保持不变
            this.subFileList = this.subFileList.concat(newFileItems)

            // 更新所有 raw 文件列表，供上传使用
            this.subSelectedFiles = this.subFileList
                .map(f => f.raw)
                .filter(Boolean)
        },

        // 记录副图拖拽起始下标
        onSubThumbDragStart(index) {
            this.subDragIndex = index
        },

        // 在目标位置放下，完成副图排序
        onSubThumbDrop(targetIndex) {
            const from = this.subDragIndex
            if (from === null || from === undefined || from === targetIndex) {
                return
            }

            // 调整 subFileList 顺序
            const moved = this.subFileList.splice(from, 1)[0]
            this.subFileList.splice(targetIndex, 0, moved)

            // 同步调整 subSelectedFiles 顺序：只根据带 raw 的项的相对顺序来重排
            const rawFiles = this.subFileList
                .filter(f => f.raw)
                .map(f => f.raw)
            this.subSelectedFiles = rawFiles

            this.subDragIndex = null
        },

        // 删除某一张副图缩略图
        removeSubImage(index) {
            const removed = this.subFileList.splice(index, 1)[0]

            // 如果是本次新选择的文件（有 raw），需要同步从 subSelectedFiles 中移除
            if (removed && removed.raw && this.subSelectedFiles && this.subSelectedFiles.length > 0) {
                const rawIndex = this.subSelectedFiles.indexOf(removed.raw)
                if (rawIndex !== -1) {
                    this.subSelectedFiles.splice(rawIndex, 1)
                }
            }

            // 如果删完了，清空对应字段
            if (this.subFileList.length === 0) {
                this.form.subImages = ''
            }
        },

        // 在提交表单时调用：批量上传主图并将结果数组转为逗号分隔字符串
        async uploadMainImages() {
            // 计算当前保留的旧图路径（fileList 中有 _path 的项）
            const keptOldPaths = this.fileList
                .filter(f => f._path && !f.raw) // 仍然存在的旧文件
                .map(f => f._path)

            // 与原始路径对比，得到被删除的旧图
            const removedPaths = this.originalMainPaths.filter(p => !keptOldPaths.includes(p))

            // 新增图片：selectedFiles 中的 raw 文件
            let newPaths = []
            if (this.selectedFiles && this.selectedFiles.length > 0) {
                const path = 'product-main'
                try {
                    const res = await batchUploadFiles(this.selectedFiles, path)
                    if (res && Array.isArray(res.data)) {
                        newPaths = res.data
                    } else {
                        this.$message.error('主图上传失败，返回数据格式不正确')
                    }
                } catch (e) {
                    this.$message.error('主图上传失败')
                }
            }

            // 如有被删除的旧图，调用批量删除
            if (removedPaths.length > 0) {
                try {
                    await batchRemoveFiles(removedPaths)
                } catch (e) {
                    // 删除失败给出提示，但不阻塞整体提交
                    this.$message.error('部分主图删除失败')
                }
            }

            const finalPaths = keptOldPaths.concat(newPaths)
            this.form.mainImage = finalPaths.join(',')
            this.originalMainPaths = finalPaths
        },

        // 在提交表单时调用：批量上传副图并将结果数组转为逗号分隔字符串
        async uploadSubImages() {
            // 当前保留的旧副图
            const keptOldPaths = this.subFileList
                .filter(f => f._path && !f.raw)
                .map(f => f._path)

            const removedPaths = this.originalSubPaths.filter(p => !keptOldPaths.includes(p))

            let newPaths = []
            if (this.subSelectedFiles && this.subSelectedFiles.length > 0) {
                const path = 'product-sub'
                try {
                    const res = await batchUploadFiles(this.subSelectedFiles, path)
                    if (res && Array.isArray(res.data)) {
                        newPaths = res.data
                    } else {
                        this.$message.error('副图上传失败，返回数据格式不正确')
                    }
                } catch (e) {
                    this.$message.error('副图上传失败')
                }
            }

            if (removedPaths.length > 0) {
                try {
                    await batchRemoveFiles(removedPaths)
                } catch (e) {
                    this.$message.error('部分副图删除失败')
                }
            }

            const finalPaths = keptOldPaths.concat(newPaths)
            this.form.subImages = finalPaths.join(',')
            this.originalSubPaths = finalPaths
        },

        // 颜色图片选择变更：保存文件对象和生成本地预览
        handleColorImageChange(file, colorIndex) {
            if (!file || !file.raw) {
                return
            }

            // 生成本地预览 URL
            const previewUrl = URL.createObjectURL(file.raw)

            // 查找是否已有该颜色的文件记录
            const existingIndex = this.colorImageFiles.findIndex(item => item.colorIndex === colorIndex)
            if (existingIndex !== -1) {
                // 替换已有记录
                this.colorImageFiles.splice(existingIndex, 1, {
                    colorIndex,
                    file: file.raw,
                    previewUrl
                })
            } else {
                // 新增记录
                this.colorImageFiles.push({
                    colorIndex,
                    file: file.raw,
                    previewUrl
                })
            }
        },

        // 获取颜色图片预览 URL（优先本地预览，其次后端路径）
        getColorImagePreview(colorIndex) {
            // 先查找本地新选择的文件
            const localFile = this.colorImageFiles.find(item => item.colorIndex === colorIndex)
            if (localFile && localFile.previewUrl) {
                return localFile.previewUrl
            }

            // 否则使用后端返回的路径
            const color = this.form.colors[colorIndex]
            if (color && color.image) {
                return this.$getImgUrl(color.image)
            }

            return ''
        },

        // 在提交表单时上传所有颜色图片
        async uploadColorImages() {
            if (!this.colorImageFiles || this.colorImageFiles.length === 0) {
                return
            }

            const path = 'product-color'
            const uploadPromises = this.colorImageFiles.map(async (item) => {
                try {
                    const res = await uploadFile(item.file, path)
                    if (res && res.data) {
                        // 上传成功，更新对应颜色的 image 字段
                        this.$set(this.form.colors[item.colorIndex], 'image', res.data)
                    } else {
                        this.$message.error(`颜色 ${item.colorIndex + 1} 图片上传失败`)
                    }
                } catch (e) {
                    this.$message.error(`颜色 ${item.colorIndex + 1} 图片上传失败`)
                    console.error(e)
                }
            })

            await Promise.all(uploadPromises)
        },

        // 提交商品表单（新增/编辑）
        async handleSubmit() {
            // 先上传主图（如有选择新文件）
            await this.uploadMainImages()
            // 再上传副图（如有选择新文件）
            await this.uploadSubImages()
            // 上传颜色图片（如有选择新文件）
            await this.uploadColorImages()

            const payload = {
                productId: this.form.productId,
                productName: this.form.productName,
                categoryId: this.form.categoryId,
                defaultPrice: this.form.defaultPrice,
                mainImage: this.form.mainImage,
                subImages: this.form.subImages,
                detail: this.form.detail,
                colors: this.form.colors,
                sizes: this.form.sizes,
                skus: this.form.skus,
                sort: this.form.sort
            }

            const isEdit = !!this.form.productId
            const request = isEdit
                ? updateProduct(payload)
                : addProduct(payload)

            request.then(() => {
                this.resetForm()
                this.$emit('saved')
                this.$emit('update:visible', false)
            })
        },

        // 颜色相关操作
        addColor() {
            this.form.colors.push({
                colorName: '',
                image: '',
                sort: 0
            })
          
        },
        removeColor(index) {
            this.form.colors.splice(index, 1)
            this.generateSkus()
        },

        // 颜色图片上传前校验
        beforeColorImageUpload(file) {
            const isImage = file.type.startsWith('image/')
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isImage) {
                this.$message.error('只能上传图片文件!')
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB!')
            }
            return isImage && isLt2M
        },

        // 尺码相关操作
        addSize() {
            this.form.sizes.push({
                sizeName: '',
                sort: 0
            })
            this.generateSkus()
        },
        removeSize(index) {
            this.form.sizes.splice(index, 1)
            this.generateSkus()
        },

        // SKU 相关操作
        // addSku() {
        //     this.form.skus.push({
        //         specColor: '',
        //         specSize: '',
        //         price: 0,
        //         stock: 0,
        //         skuCode: ''
        //     })
        // },
        removeSku(index) {
            this.form.skus.splice(index, 1)
        },

        // 根据颜色和尺码自动生成所有 SKU 组合
        generateSkus() {
            // if (!this.form.colors || this.form.colors.length === 0) {
            //     this.$message.warning('请先添加颜色')
            //     return
            // }
            // if (!this.form.sizes || this.form.sizes.length === 0) {
            //     this.$message.warning('请先添加尺码')
            //     return
            // }

            const skus = []
            const basePrice = this.form.defaultPrice || 0

            this.form.colors.forEach((c, colorIndex) => {
                this.form.sizes.forEach((s, sizeIndex) => {
                    skus.push({
                        specColor: String(colorIndex),
                        specSize: String(sizeIndex),
                        price: basePrice,
                        stock: 0,
                        skuCode: ''
                    })
                })
            })

            this.form.skus = skus
        }
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        
    }
}
</script>
<style lang='less' scoped>
/deep/.el-drawer__header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ECEEF4;
}
::v-deep .el-table__body tr:hover > td {
  background-color: transparent !important; // 透明（与页面背景融合）
  // 或设置为默认行背景色（推荐，避免与斑马线冲突）
  // background-color: #ffffff !important; 
}

.header-bar {
    margin-left: 10px;
    color: black;
    font-weight: bold;
    order: 2;
}

.all {
    padding: 20px;
    padding-bottom: 70px; // 预留按钮高度
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto; // 内容区内部滚动
}

.drawer-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 10px 20px;
    box-sizing: border-box;
    border-top: 1px solid #ebeef5;
    background: #fff;
    text-align: right;
}

.detail-wrapper {
    height: 600px;

    .detail-thumbs {
        height: 100%;
        padding: 15px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 15px;

        .detail-thumb-item {
            width: 100px;
            height: 100px;
            border: 1px solid rgb(197, 195, 195);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .detail-thumb-image {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                display: block;

            }

            .detail-remove {
                position: absolute;
                border-radius: 9px;
                padding: 2px;
                top: -7px;
                right: -7px;
                background: rgb(211, 209, 207);
                display: none;
            }

            .el-icon-close:before {
                color: #fff;
            }

            .detail-remove:hover {
                background: black;

                .el-icon-close:before {
                    color: #fff;
                }
            }
        }



        .detail-thumb-item:hover {
            border: 1px dashed rgb(81, 123, 249);

            .detail-remove {
                display: block;
            }
        }
    }

    .detail-preview {
        height: 100%;
        overflow-y: auto;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

/* 覆盖 picture-card 模式的默认样式 */
/deep/.avatar-uploader .el-upload--picture-card {
    width: 120px;
    height: 120px;
    line-height: 120px;
    
}

/deep/.avatar-uploader .el-upload-list--picture-card .el-upload-list__item {
    width: 120px;
    height: 120px;
    line-height: 120px;
    

}


/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

}

.color-avatar {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/deep/.color-image-uploader .el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.color-image-uploader .el-upload:hover {
    border-color: #409EFF;
}

.color-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
</style>